<template>
  <div class="upload-box">
    <div class="item-img">
      <div class="img-box">
        <el-image
          v-for="(item,index) in explainimg"
          :key="index"
          style="width: 110px; height: 110px; border-radius: 4px; margin-right:5px"
          :src="item.url"
          fit="cover"
          :preview-src-list="RxplainPreList"
        ></el-image>
      </div>
      <div class="upload" @click="explain = true">
        <i class="el-icon-plus"></i>
        <span>上传图像</span>
      </div>
    </div>
    <!-- 选择图片 -->
    <el-dialog title="上传图片" :visible.sync="explain" center>
      <span>需要注意的是内容是默认不居中的</span>
      <el-upload
        action="#"
        list-type="picture-card"
        :auto-upload="false"
        :file-list="explainimg"
        :on-change="changeRxplain"
        :limit="1"
        :on-exceed="exceesLimitRxplain"
        multiple
        drap
      >
        <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
        <i slot="default" class="el-icon-plus"></i>
        <div class="img-box" slot="file" slot-scope="{file}">
          <img class="el-upload-list__item-thumbnail" :src="file.url" alt />
          <span class="el-upload-list__item-actions">
            <span class="el-upload-list__item-delete" @click="removeRxplain(file)">
              <i class="el-icon-delete"></i>
            </span>
          </span>
        </div>
      </el-upload>
      <span slot="footer" class="dialog-footer">
        <el-button @click="explain = false">取 消</el-button>
        <el-button type="primary" @click="explain = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name:'Upload',
  data() {
    return {
      // 删除图片按钮
      disabled: false,
      // 上传图片对话框
      explain: false,
      // 上传图片图片
      explainimg: [],
    };
  },
  methods: {
    // 上传图片说明
    changeRxplain(file, fileList) {
      this.$emit('pictures',file,fileList)
      this.explainimg.push({
        name: file.name,
        url: file.url,
        id: file.uid,
      });
    },
    // 上传图片删除
    removeRxplain(file) {
      const index = this.explainimg.findIndex((el) => el.uid === file.uid);
      index !== -1 && this.explainimg.splice(index, 1);
    },
    // 上传图片数量超出限制
    exceesLimitRxplain() {
      alert("图片数量超出限制");
    },
  },
  computed: {
    // 上传图片预览数组
    RxplainPreList() {
      return this.explainimg.map((el) => {
        return el.url;
      });
    },
  },
};
</script>

<style lang="less" scoped>
.upload-box {
  .upload {
    width: 110px;
    height: 110px;
    background-color: #fafafa;
    border: 0.5px dashed #707070;
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    cursor: pointer;
    align-items: center;
    .el-icon-plus {
      font-size: 16px;
      color: #d9d9d9;
    }
    span {
      font-size: 12px;
      color: #a9a9a9;
    }
  }
  .item-img {
    width: 100%;
    display: flex;
  }
  /deep/.img-box {
    height: 100%;
  }
}
</style>